<template>
<div class="warp">
  <my-card-list :data="icons" :columns="4">
    <!-- <el-card slot-scope="{item}">{{item}}</el-card> -->
    <div style="width: 100%;padding: 10px; box-sizing:border-box; cursor:pointer" slot-scope="{item}">
      <el-image style="width: 100%;" fit="contain" :src="item.src"></el-image>
    </div>
  </my-card-list>
</div>
  
</template>
<script>
import { sources } from '$ui/gojs/sources/index'
const icons = sources[0].source.map((item) => {
  return {
    label: item.split('.')[0],
    src: require(`$ui/gojs/sources/${item}`)
  }
})
export default {
  components: {},
  props: {
  },
  data() {
    return {
      data: [1, 2, 3, 4, 5, 6, 7],
      icons: icons
    }
  },
  computed: {
  },
  methods: {
  },
  created() {
  },
  mounted() {
    console.log(icons)
  }
}
</script>
<style lang="scss" scoped>
.warp{
  width: 100%;
  height: 100%;
  padding: 5px;
}
</style>